<script setup lang="ts">
import type { Component } from 'vue';
import { shallowRef } from 'vue';
import Copyright from '@/components/common/login/copyright.vue';
import SloganIcon from '@/components/common/login/slogan-icon.vue';
import { usePlatformStore } from '@/store/modules/platform';
import PwdLogin from './modules/pwd-login.vue';
import CodeLogin from './modules/code-login.vue';
import qrcodeLogin from './modules/qrcode-login.vue';
import Register from './modules/register.vue';
import ForgetPassword from './modules/forget-password.vue';

defineOptions({
  name: 'LoginView'
});

interface Props {
  module?: UnionKey.LoginModule;
}

const { module = 'pwd-login' } = defineProps<Props>();

interface LoginModule {
  component: Component;
}

const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
  'pwd-login': { component: PwdLogin },
  'code-login': { component: CodeLogin },
  'qrcode-login': { component: qrcodeLogin },
  register: { component: Register },
  'forget-password': { component: ForgetPassword }
};

const activeModule = shallowRef(moduleMap[module || 'pwd-login']);
const { platformInfo } = usePlatformStore();

function changeModule(m: UnionKey.LoginModule) {
  activeModule.value = moduleMap[m];
}
</script>

<template>
  <div class="min-h-full flex flex-1 select-none overflow-x-hidden">
    <!-- 头部 Logo 和应用名称 -->
    <div class="absolute left-0 top-0 z-10 flex flex-1">
      <div class="ml-4 mt-4 flex flex-1 items-center text-foreground sm:left-6 sm:top-6">
        <SystemLogo type="logo" class="mr-2 w-42px" />
        <p class="text-xl font-medium">
          {{ platformInfo.systemName }}
        </p>
      </div>
    </div>

    <!-- 系统介绍 -->
    <div class="relative hidden w-0 flex-1 lg:block">
      <div class="absolute inset-0 h-full w-full bg-background-deep">
        <div class="login-background absolute left-0 top-0 size-full"></div>
        <div class="mr-20 h-full flex-col-center enter-x-r">
          <SloganIcon class="h-64 w-2/5 animate-float" />
          <!-- <div class="mt-6 text-foreground font-sans lg:text-2xl">量子能力后台管理系统</div> -->
          <!-- <div class="mt-2 dark:text-muted-foreground">全方位管理量子能力</div> -->
        </div>
      </div>
    </div>

    <!-- 右侧认证面板 -->
    <div
      class="relative min-h-full w-[34%] flex-col-center flex-1 items-center bg-white px-6 py-10 lg:flex-initial lg:px-8"
    >
      <Transition appear mode="out-in" name="slide-right">
        <component
          :is="activeModule.component"
          class="mt-6 w-full enter-x sm:mx-auto md:max-w-md"
          @change-module="changeModule"
        />
      </Transition>

      <div v-if="false" class="absolute bottom-3 flex text-center text-xs text-muted-foreground">
        <Copyright />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-background {
  background: linear-gradient(
    154deg,
    rgba(7, 7, 9, 0.08235) 30%,
    rgb(var(--primary-color) / 30%) 48%,
    rgba(7, 7, 9, 0.08235) 64%
  );
  filter: blur(100px);
}
</style>
